<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="header-title">编辑信息</text>
		</view>

		<!-- 编辑手机号和验证码 -->
		<view class="section">
			<view class="item">
				<text class="label">手机号</text>
				<view class="content">
					<input v-model="phoneNumber" class="input-field" placeholder="请输入手机号" disabled="true" />
				</view>
			</view>

			<view class="item">
				<text class="label">验证码</text>
				<view class="content">
					<input v-model="verificationCode" class="input-field2" placeholder="请输入验证码" />

					<button @click="handleMessage" :disabled="isSending" class="get-code">
						{{ isSending ? countdown + '秒后重试' : '发送验证码' }}
					</button>
				</view>
			</view>
		</view>

		<!-- 修改密码 -->
		<view class="section">
			<view class="item">
				<text class="label">新密码</text>
				<view class="content">
					<input :type="showOldPassword ? 'text' : 'password'" v-model="oldPassword" class="input-field"
						placeholder="请输入新密码" />
					<image :src="showOldPassword ? '/static/eye.png' : '/static/eye-close.png'" class="toggle-eye"
						@click="toggleOldPasswordVisibility">
					</image>
				</view>
			</view>
			<view class="item">
				<text class="label">确认密码</text>
				<view class="content">
					<input :type="showNewPassword ? 'text' : 'password'" v-model="newPassword" class="input-field"
						placeholder="请输入确认密码" />
					<image :src="showNewPassword ? '/static/eye.png' : '/static/eye-close.png'" class="toggle-eye"
						@click="toggleNewPasswordVisibility">
					</image>
				</view>
			</view>
		</view>

		<!-- 保存按钮 -->
		<view class="save-section">
			<text class="save-button" @click="saveInfo">保存</text>
		</view>
	</view>
</template>

<script>
	import {
		phoneLogin,
		codeMessage,
		UUIDCode,
		UUIDLogin,
		getuser,
		updateEditlnfoUser
	} from "@/api/user.js"
	export default {
		data() {
			return {
				countdown: 60,
				isSending: false,
				phoneNumber: "",
				oldPassword: "",
				newPassword: "",
				verificationCode: "",
				codeButtonText: "获取验证码", // 初始按钮文本
				codeCountdown: 60, // 验证码倒计时
				showOldPassword: false, // 原始密码显示
				showNewPassword: false, // 新密码显示
			};
		},
		methods: {
			handleMessage() {
				if (this.isValidPhone(this.phoneNumber)) {
					var data = {
						number: this.phoneNumber
					}
					codeMessage(data).then(res => {
						this.countdown = 60
						this.isSending = true
						this.startCountdown()
					})
				} else {
					uni.showToast({
						type: 'error',
						title: '手机输入错误',
						icon: 'none',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					});
				}
			},
			// 启动倒计时
			startCountdown() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						this.stopCountdown();
					}
				}, 1000);
			},

			// 停止倒计时
			stopCountdown() {
				clearInterval(this.timer);
				this.timer = null;
				this.isSending = false;
			},
			isValidPhone(phone) {
				const phoneRegEx = /^1[3-9]\d{9}$/;
				return phoneRegEx.test(phone);


			},

			// 切换旧密码可见
			toggleOldPasswordVisibility() {
				this.showOldPassword = !this.showOldPassword;
			},

			// 切换新密码是否可见
			toggleNewPasswordVisibility() {
				this.showNewPassword = !this.showNewPassword;
			},

			// 保存按钮
			saveInfo() {

				if (this.isValidPhone(this.phoneNumber)) {
					// 密码验证
					const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)[A-Za-z\d]{6,32}$/;
					if (!passwordRegex.test(this.oldPassword)) {
						this.$u.toast('新密码应包含字母和数字，且长度6-32位');
						return
					}

					if (!passwordRegex.test(this.newPassword)) {
						this.$u.toast('确认密码应包含字母和数字，且长度6-32位');
						return
					}
					if (this.oldPassword == this.newPassword) {
						var data = {
							phone: this.phoneNumber,
							code: this.verificationCode,
							oldPassword: this.oldPassword,
							newPassword: this.newPassword
						}

						updateEditlnfoUser(data).then(res => {
							if (res.message == "false") {
								uni.showToast({
									type: 'error',
									title: '密码不一致',
									icon: 'none',
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
								});
							} else if (res.message == "false1") {
								uni.showToast({
									type: 'error',
									title: '验证码错误',
									icon: 'none',
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
								});
							} else if (res.message == "false2") {
								uni.showToast({
									type: 'error',
									title: '修改失败',
									icon: 'none',
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
								});
							} else if (res.message == "false3") {
								uni.showToast({
									type: 'error',
									title: '验证码失效',
									icon: 'none',
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
								});
							} else {
								uni.showToast({
									type: 'success',
									title: '修改成功',
									icon: 'none',
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
								});
							}
						})
					} else {
						uni.showToast({
							type: 'error',
							title: '密码不一致',
							icon: 'none',
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						});
					}
				} else {
					uni.showToast({
						type: 'error',
						title: '手机输入错误',
						icon: 'none',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					});
				}

			},
		},
		onLoad() {
			getuser({
				userId: this.$cookies.get("id")
			}).then(res => {

				this.phoneNumber = res.data.userPhone
			})


		}
	};
</script>

<style scoped>
	/* 容器设置 */
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f5f6fa;
		padding: 20px;
		height: 100vh;
		font-family: Arial, sans-serif;
	}

	/* 顶部标题栏 */
	.header {
		display: flex;
		align-items: center;
		width: 100%;
		background-color: #2ac2d2;
		padding: 15px;
		color: #ffffff;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		margin-bottom: 20px;
	}

	.header-title {
		font-size: 18px;
		font-weight: bold;
	}

	/* 信息编辑区 */
	.section {
		width: 100%;
		margin-bottom: 15px;
		background-color: #ffffff;
		border-radius: 10px;
		padding: 15px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.item {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.label {
		width: 70px;
		font-size: 15px;
		color: #333333;
	}

	.content {
		display: flex;
		width: 75%;
		align-items: center;
		flex-grow: 1;
		position: relative;
	}

	.input-field {
		width: 100%;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 6px;
		font-size: 14px;
		color: #333;
		background-color: #f9fafc;
		transition: border-color 0.2s ease;
		outline: none;
	}

	.input-field2 {
		width: 65%;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 6px;
		font-size: 14px;
		color: #333;
		background-color: #f9fafc;
		transition: border-color 0.2s ease;
		outline: none;
	}

	.input-field:focus {
		border-color: #4a90e2;
		box-shadow: 0 0 4px rgba(74, 144, 226, 0.2);
	}

	.get-code {
		width: 150px;
		height: 40px;
		font-size: 14px;
		color: #4a90e2;
		margin-left: 5px;
		cursor: pointer;
		transition: color 0.2s;
	}

	.get-code:hover {
		color: #357ab8;
	}

	.toggle-eye {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 10px;
		cursor: pointer;
	}

	/* 保存按钮 */
	.save-section {
		width: 100%;
		text-align: center;
		margin-top: 20px;
	}

	.save-button {
		display: inline-block;
		width: 90%;
		padding: 12px;
		font-size: 16px;
		font-weight: bold;
		color: #ffffff;
		background-color: #2ac2d2;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		text-align: center;
		transition: background-color 0.3s, box-shadow 0.3s;
		cursor: pointer;
	}
</style>